<template>
  <table id="attributeTable" class="mtable">
    <tr v-for="(obj, index) in item" :key="index" class="mtr">
      <td class="field">{{ obj.field }}</td>
      <td class="value">{{ obj.value }}</td>
    </tr>
  </table>
</template>

<script>
import { } from "vue"
export default {
  name: 'MList',
  props: {
    item: {
      type: Object,
      required: false
    },
  },
  components: {},
  setup() {
    return {
    };
  },
};
</script>

<style scoped>
.mtable {
  width: 100%;
  font-size: 13px;

}

.field {
  text-align: left;
  padding: 8px 0;
  flex: 1 1 50px;
  word-break: break-word;
  /* 允许长单词换行 */
  overflow-wrap: break-word;
  min-width: 0;
  /* 确保内容可以缩小 */
}

.value {
  text-align: right;
  padding: 8px 0;
  flex: 1 1 200px;
  word-break: break-word;
  /* 允许长单词换行 */
  overflow-wrap: break-word;
  min-width: 0;
  /* 确保内容可以缩小 */
}

.mtr {
  display: flex;
  flex-wrap: wrap;
  /* 允许子元素换行 */
  align-items: flex-start;
  /* 确保内容对齐顶部 */
}
</style>
